<template>
    <div>
        <section class="content-header clearfix">
            统计分析
            <span>&nbsp;&nbsp;>&nbsp;&nbsp;</span>人员工作量
        </section>
        <section class="content-main clearfix">
            <div class="col-sm-4 clearfix">
                <label class="col-sm-3 control-label">创建时间：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker1" v-model="timeData.eventTimeStart" @mousedown="selectDate1" placeholder="YYYY-MM-DD">
                    </div>
                </div>
                <div class="col-sm-1" style="height:34px;line-height:34px">--
                </div>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker2" v-model="timeData.eventTimeEnd" @mousedown="selectDate2" placeholder="YYYY-MM-DD">
                    </div>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-2 col-sm-offset-1">
                    <button type="button" class="btn  btn-primary" @click="select">查询</button>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-2 col-sm-offset-10">
                    <button type="button" class="btn  btn-primary">导出</button>
                </div>
            </div>
        </section>
        <section class="clearfix" style="margin-top:20px;">
            <div class="col-sm-8 col-sm-offset-2 box-body clearfix">
                <table id="example2" class="table-hover" border="1">
                    <thead>
                        <tr class="title">
                            <th style="width:25%;">部门</th>
                            <th style="width:15%;">处理人</th>
                            <th style="width:15%;">工单</th>
                            <th style="width:15%;">及时工单</th>
                            <th style="width:15%;">超时工单</th>
                            <th style="width:15%;">及时率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in personOrder" :key="item.value">
                            <td>{{item.eventDepName}}</td>
                            <td colspan="5">
                                <table class="intable">
                                    <tr v-for="list in item.list" :key="list.value">
                                        <td style="width:20%">{{list.eventPersonName}}</td>
                                        <td style="width:20%">{{list.eventNum}}</td>
                                        <td style="width:20%">{{list.timelyNum}}</td>
                                        <td style="width:20%">{{list.overtimeNum}}</td>
                                        <td style="width:20%">{{list.timelinessRate}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>合计</td>
                            <td colspan="5">
                                <table class="intable">
                                    <tr>
                                        <td style="width:20%"></td>
                                        <td style="width:20%">{{sum('eventNum')}}</td>
                                        <td style="width:20%">{{sum('timelyNum')}}</td>
                                        <td style="width:20%">{{sum('overtimeNum')}}</td>
                                        <td style="width:20%">{{(sum('timelyNum')/sum('eventNum')*100).toFixed(2)}}%</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-8 col-sm-offset-2">
                <div id="echartContainer" style="width:100%; height:300px;padding:33px 15px"></div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            timeData: {
                eventTimeStart:utils.nowDate(-7),
                eventTimeEnd: utils.nowDate(0)
            },
            personOrder: []
        };
    },
    mounted() {
        this.select()
    },
    methods: {
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.eventTimeEnd = ev.target.value;
                });
        },
        getEveryPersonOrder(callback) {
            // console.log(this.timeData)
            this.$api.tongji.home.everyPersonOrder(this.timeData).then(res => {
                if (res.success) {
                    console.log(res);
                    this.personOrder = res.data;
                    callback();
                }
            });
        },
        sum(data) {
            let x = 0;
            for (let item in this.personOrder) {
                // console.log(this.personOrder[item].list)
                for (let i in this.personOrder[item].list) {
                    // console.log(this.personOrder[item].list[i].eventNum)
                    x += this.personOrder[item].list[i][data];
                }
            }
            // console.log(data)
            return x;
        },
        getNameList() {
            let list = [];
            for (let item in this.personOrder) {
                // console.log(this.personOrder[item].list)
                for (let i in this.personOrder[item].list) {
                    // console.log(this.personOrder[item].list[i].eventNum)
                    list.push(
                        this.personOrder[item].list[i]["eventPersonName"]
                    );
                }
            }
            // console.log(list)
            return list;
        },
        getRateList() {
            let list = [];
            for (let item in this.personOrder) {
                // console.log(this.personOrder[item].list)
                for (let i in this.personOrder[item].list) {
                    // console.log(this.personOrder[item].list[i].eventNum)
                    list.push(
                        this.personOrder[item].list[i][
                            "timelinessRate"
                        ].replace(/%/g, "")
                    );
                }
            }
            // console.log(list)
            return list;
        },
        select() {
            var myChart = echarts.init(document.getElementById("echartContainer"));
            this.getEveryPersonOrder(() => {
                myChart.setOption({
                    title: {
                        text: "及时率",
                        x: 'center',
                    },
                    color: ["#3398DB"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: "{a} <br/>{b} : {c} %"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: this.getNameList(),
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            axisLabel: {
                                formatter: "{value}%"
                            }
                        }
                    ],
                    series: [
                        {
                            name: "直接访问",
                            type: "bar",
                            barWidth: "60%",
                            data: this.getRateList()
                        }
                    ]
                });
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.intable {
  margin-left: -1px;
  margin-bottom: -1px;
  tr {
    border: 0;
  }
  td {
    border-top: 0;
    border-left: 1px solid #808080;
    border-bottom: 1px solid #808080;
    border-right: 0;
    box-sizing: border-box;
  }
}
</style>
